<script setup>

import {reactive, ref} from 'vue';
import * as commonDict from '@/utils/commonDict.js'
import {editMenu, fetchEntryMenuTree, fetchMenuOne, saveMenu} from '@/api/menuApi.js';
import {message} from 'ant-design-vue';


function onOpen(id) {
  if (id) {
    handleUpdate(id)
  }
  loadEntryMenuTree()
  open.value = true
}

const onClose = () => {
  open.value = false
  resetForm()

}
const open = ref(false)
const formRef = ref(null)
const loading = ref(false)

const emits = defineEmits(['saveSuccessful'])

let form = ref({
  menuId:'',
  menuName: '',
  path: '',
  parentId: undefined,
  menuType: '2',
  visible: '1',
  orderNum: ''
})

let entryMenu = ref([])

const loadEntryMenuTree = () => {
  loading.value = true
  fetchEntryMenuTree().then(x => {
    entryMenu.value = x
    loading.value = false
  }).finally(() => loading.value = false)
}


function summit() {
  formRef.value.validate().then(() => {
    if (form.value.menuId) {
      editMenu(form.value).then(() => {
        message.success('更新成功')
        emits('saveSuccessful')
        onClose()
      })
    } else {
      saveMenu(form.value).then( () => {
        message.success('保存成功')
        emits('saveSuccessful')
        onClose()
      })
    }
  })
}

const handleUpdate = (menuId) => {
  fetchMenuOne(menuId).then(x => {
    form.value = x
    onOpen()
  })
}

const resetForm = () => {
  formRef.value.resetFields();
  form.value.menuId = ''
};


defineExpose({
  onOpen
})

</script>

<template>
  <a-drawer
      title="新增菜单"
      :width="720"
      :open="open"
      @close="onClose"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
  >

    <a-form ref="formRef" :model="form" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item
              :rules="[{ required: true, message: '请输入显示名称' }]"
              name="menuName"
              label="显示名称">
            <a-input
                placeholder="请输入显示名称"
                v-model:value="form.menuName"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
              :rules="[{ required: true, message: '请选择菜单类型' }]"
              name="menuType"
              label="菜单类型">
            <a-radio-group v-model:value="form.menuType">
              <a-radio-button :value="item" :key="item" v-for="item in Object.keys(commonDict.menuType)">
                {{ commonDict.menuType[item].name }}
              </a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="form.menuType === '2' ? 12:24">
          <a-form-item

              :rules="[{ required: true, message: '请选择上级菜单' }]"
              name="parentId"
              label="上级菜单">
            <a-tree-select
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="请选择上级菜单"
                :tree-data="entryMenu"
                :field-names="{
                     children: 'children',
                     label: 'name',
                     value: 'id',
                  }"
                allow-clear
                v-model:value="form.parentId">

            </a-tree-select>
          </a-form-item>
        </a-col>
        <a-col v-if="form.menuType === '2'" :span="12">
          <a-form-item
              :rules="[{ required: true, message: '请输入组件地址' }]"
              name="path"
              label="组件地址">
            <a-input
                placeholder="请输入组件地址"
                v-model:value="form.path" addon-before="src/views/"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item
              :rules="[{ required: true, message: '请选择图标' }]"
              name="icon"
              label="图标">
            <a-input
                placeholder="请选择图标"
                v-model:value="form.icon"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
              :rules="[{ required: true, message: '请选择是否可见' }]"
              name="visible"
              label="是否可见">
            <a-radio-group v-model:value="form.visible">
              <a-radio :value="item" :key="item" v-for="item in Object.keys(commonDict.visible)">
                {{ commonDict.visible[item].name }}
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item

              :rules="[{ required: true, message: '请输入排序' }]"
              name="orderNum"
              label="排序">
            <a-input-number
                class="w-full"
                placeholder="请输入排序"
                v-model:value="form.orderNum"></a-input-number>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button :loading="loading" type="primary" @click="summit">提交</a-button>
      </a-space>
    </template>

  </a-drawer>
</template>

<style scoped>

</style>
